<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <link href="../css/pulic.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="../assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="../lay/css/layui.css" />
    <link href="../css/authority.css" rel="stylesheet" />
    <script src="../js/jquery-3.2.1/jquery-3.2.1.js"></script>
    <script src="../js/deptlevelcosts.js" charset="utf-8"></script>
    <style>
        .row {
            text-align:center;
        }
        .deptUserTypeName{
            background:#cccccc;
        }
    </style>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

</fieldset>

<table style="width: 100%">
    <tr>
        <td align="center">部门名称</td>
        <td align="center">职级名称</td>
        <td align="center">费用类型金额管理</td>
    </tr>
    <tr>
        <td align="center">
            <div style="display: inline-block; width: 220px; height: 320px; padding: 10px; border: 1px solid #ddd; overflow: auto;" class="user" id="deptTN">
              <c:forEach items="${departmentNameList }" var="departmentName" varStatus="st"> 
                <div class="dept"><span class="username deptName departName${st.index }" onclick="change1(this)" id="${departmentName.departmentId}">${departmentName.departmentName}</span></div>
              </c:forEach>
            </div>
        </td>
        <td align="center">
            <div style="display: inline-block; width: 220px; height: 320px; padding: 10px; border: 1px solid #ddd; overflow: auto;"  class="user" id="userTN">
              <c:forEach items="${userTypeNameList }" var="userTypeName" varStatus="userType"> 
                <div id="userTypeName${userType.index}" class="userType"><span class="role userTypeName" onclick="change2(this)">${userTypeName.userTypeName }</span></div>
              </c:forEach>
            </div>
        </td>
        <td align="center">
            <div style="display: inline-block; width: 500px; height: 320px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>费用类型名称</th>
                                <th>金额</th>
                                <th colspan="2">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                               <c:forEach items="${costTypeNameList }" var="costTypeName" varStatus="st"> 
                                 <tr class="costTypeName">
                                    <td id="${costTypeName.costTypeId }">${costTypeName.costTypeName }</td>
                                    <td class="test">
                                        <input type="text" style="width: 50px" id="salary${st.index}" class="salary">
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)" class="btn btn-primary btn-sm" onclick="newInsert(this)">新增</a>
                                    </td>
                                    <td>
                                        <a href="javascript:void(0)" class="btn btn-primary btn-sm" onclick="updateSalary(this)">修改</a>
                                    </td>
                                 </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
        </td>
    </tr>
</table>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

</fieldset>

<div class="row" style="margin-left: -55%;">
    <form class="form-inline" >
        <div class="form-group">
            <input type="text" class="form-control" id="insertDeptName" placeholder="请输入部门名称">
        </div>
        <a href="javascript:void(0)" class="btn btn-primary" id="insertDeptNameBtn">+</a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <input type="text" class="form-control" id="insertUserTypeName" placeholder="请输入职级名称">
        </div>
        <a href="javascript:void(0)" class="btn btn-primary" id="insertUserTypeNameBtn">+</a>
    </form>
</div>

<script src="../js/layui/layui.js"></script>  

<script>
	//点击部门名称找到已有职称，改变其背景颜色
	$(function(){
		//点击部门获取其的ID
		$(".deptName").click(function(){
			var deptName = $(this);
			console.log(deptName.attr("id"));
			var departmentId = deptName.attr("id");
			//获取界面的职称名称
			var $userTypeName = $(".userTypeName");
			//获取职称的总共长度
			console.log($userTypeName.length);
			
			//金额变为0
			 var salary = $(".salary");
	         for(var j=0;j<salary.length;j++){
	     			$("#salary"+j).val("0");
	     	}
			
			//点击已有部门名称时移除原来的职级名称
            for(var i=0;i<$userTypeName.length;i++){
            	if($("#userTypeName"+i).children().hasClass("deptUserTypeName")){
            		$("#userTypeName"+i).children().removeClass("deptUserTypeName"); 
            	}
            }
			
			$.ajax({
				url:"getDeptUserTypeName.do",
	    		type:"POST",
	    		contentType:'application/json;charset=UTF-8',
	    		dataType:"json",
	            async:true,
	            data:departmentId,
	            success:function(data){
	            	$.each(data,function(key,deptUserTypeNameList){
	            		for(var i=0;i<$userTypeName.length;i++){
	            			if(deptUserTypeNameList.userTypeName == $userTypeName.eq(i).text()){
	            				console.log(deptUserTypeNameList.userTypeId);
	            				$userTypeName.eq(i).addClass("deptUserTypeName");
	            				$userTypeName.eq(i).attr("id",deptUserTypeNameList.userTypeId);
	            			}
	            		}
	            	});
	            },
			});
		});
	});
	
	  //加载事件
    $(function(){
        var collection1 = $(".username");
        var collection2 = $(".role");
        $.each(collection1, function(){
            $(this).addClass("start");
        });
        $.each(collection2, function(){
            $(this).addClass("start");
        });
      //金额变为0
        var salary = $(".salary");
        for(var j=0;j<salary.length;j++){
    			$("#salary"+j).val("0");
    	}
    });
    //点击事件
    function change1(dom){
        var collection1 = $(".username");
        $.each(collection1, function(){
            $(this).removeClass("end");
            $(this).addClass("start");
        });
        $(dom).removeClass("start");
        $(dom).addClass("end");
    }
    function change2(dom){
        var collection2 = $(".role");
        $.each(collection2, function(){
            $(this).removeClass("end");
            $(this).addClass("start");
        });
        $(dom).removeClass("start");
        $(dom).addClass("end");
        
        //点击得到对应职级名称的ID
        var $userTypeName = $(dom);
    	var userTypeNameId = $userTypeName.attr("id");
    		
    		var userTypeCosts = {
    				"userTypeId":userTypeNameId
    		}
    	//查询费用类型对应的金额	
    		$.ajax({
    			url:"getSalary.do",
        		type:"POST",
        		contentType:'application/json;charset=UTF-8',
        		dataType:"json",
                async:true,
                data:JSON.stringify(userTypeCosts),
                success:function(data){
                	$.each(data,function(key,salaryList){
                		var salaryId = $("#"+salaryList.costTypeId).next("td").find("input").attr("id");
                		console.log(salaryId);
                		console.log(salaryList.salary);
                		$("#"+salaryId).val(salaryList.salary);
                		
	            	});
                },
    		});
    	
    	//点击得到对应职级名称
    	var userTypeName = $userTypeName.text();
    	
    	//得到部门名称ID
    	var departmentId;
    	for(var m=0;m<$(".deptName").length;m++){
    		if($(".departName"+m).hasClass("end")){
    			departmentId = $(".departName"+m).attr("id");
    		}
    	}
    	
        var deptUserType = {
				"departmentId":departmentId,
				"userTypeName":userTypeName
		} 
        console.log(departmentId);
    	//给部门增加职级名称
    	if($userTypeName.hasClass("deptUserTypeName")){
    		layer.msg("该部门职级已存在");
    		return false;
    	}else if(departmentId == null){
    		layer.msg("请选择部门名称");
    		return false;
    	}else if($userTypeName.hasClass("deptUserTypeName") == false && departmentId != "" && departmentId != null){
    	  $.ajax({
    	    	url:"insertDeptUserTypeName.do",
    	    	type:"POST",
    	    	contentType:'application/json;charset=UTF-8',
    	    	dataType:"json",
    	        async:true,
    	        data:JSON.stringify(deptUserType),
    	        success:function(data){
    	        	if(data.num == "" && data.num == null){
	            		layer.msg("职级增加失败");
	            	}else if(data.num == 1){
	            		layer.msg("职级增加成功");
	            	}
    	        	//给职级名称增加ID和class
    	        	$userTypeName.attr("id",data.deptUserTypeId);
    	        	$userTypeName.addClass("deptUserTypeName");
    	        },
    	    }); 
    	}
    }
	
    layui.use('layer', function(){
	    var layer = layui.layer;
	});
	
	//增加部门名称
	$(function(){
		
		//界面刷新输入框文本内容为空
		$("#insertDeptName").val("");
		
		$("#insertDeptNameBtn").click(function(){
			
			//获取已有的部门名称
			for(var i=0;i<$(".deptName").length;i++){
				var deptName = $(".deptName").eq(i).text();
				
				//获取输入框的文本内容
				var insertdeptName = $("#insertDeptName").val();
				
				if(insertdeptName == ""){
					 layer.msg("请输入部门名");
			         return false;
				}else if(insertdeptName == deptName){
					 layer.msg("部门名已存在");
			         return false;
				}else if(i == $(".deptName").length-1){
					$.ajax({
						url:"insertDepartmentName.do",
			    		type:"POST",
			    		contentType:'application/json;charset=UTF-8',
			    		dataType:"json",
			            async:true,
			            data:insertdeptName,
			            success:function(data){
			            	//部门名称增加提示
			            	if(data.num == "" && data.num == null){
			            		layer.msg("部门增加失败");
			            	}else if(data.num == 1){
			            		layer.msg("部门增加成功");
			            	}
			            	//移除已有的部门名称
			            	$(".dept").remove();
			            	//增加部门名称
			            	$.each(data.deptmentNameList,function(key,deptmentName){
			            		var deptTN = document.getElementById("deptTN");
			            		var dept = document.createElement("div");
			            		dept.innerHTML = "<span class='username deptName start departName"+key+"' onclick='change1(this)' id="+deptmentName.departmentId+">"+deptmentName.departmentName+"</span>";
			            		dept.setAttribute("class","dept");
			            		deptTN.appendChild(dept);
			            	}); 
			            },
					});
				}
				
			}

		});
	});
	
	//增加新的职级名称
	$(function(){
		
		//界面刷新输入框文本内容为空
		$("#insertUserTypeName").val("");
		
		$("#insertUserTypeNameBtn").click(function(){
			
			//得到部门名称ID
	    	var departmentId;
	    	for(var m=0;m<$(".deptName").length;m++){
	    		if($(".departName"+m).hasClass("end")){
	    			departmentId = $(".departName"+m).attr("id");
	    		}
	    	}
			
			//获取已有的职级名称
			for(var i=0;i<$(".userTypeName").length;i++){
				var userTypeName = $(".userTypeName").eq(i).text();
				
				//获取输入框的文本内容
				var insertUserTypeName = $("#insertUserTypeName").val();
				
				var deptUserType = {
						"departmentId":departmentId,
						"userTypeName":insertUserTypeName
				} 
				
				if(insertUserTypeName == ""){
					 layer.msg("请输入职级名称");
			         return false;
				}else if(insertUserTypeName == userTypeName){
					 layer.msg("职级名称已存在");
			         return false;
				}else if(i == $(".userTypeName").length-1){
					$.ajax({
		    	    	url:"insertDeptUserTypeName.do",
		    	    	type:"POST",
		    	    	contentType:'application/json;charset=UTF-8',
		    	    	dataType:"json",
		    	        async:true,
		    	        data:JSON.stringify(deptUserType),
		    	        success:function(data){
		    	        	if(data.num == "" && data.num == null){
			            		layer.msg("职级增加失败");
			            	}else if(data.num == 1){
			            		layer.msg("职级增加成功");
			            	}
		    	        	var length = $(".userTypeName").length-1;
		    	        	var lengthId = length+1;
		    	        	$("#userTypeName"+length).append("<div id='userTypeName"+lengthId+"' class='userType'><span class='role userTypeName start deptUserTypeName' onclick='change2(this)' id="+data.deptUserTypeId+">"+data.userTypeName+"</span></div>"); 
		    	        },
		    	    }); 
				}
				
			}
		});
	});
	
	//增加费用类型的金额
	function newInsert(btn){
		
		var $btn = $(btn);
		
		//获取职级名称ID
		for(var i=0;i<$(".userTypeName").length;i++){
			if($("#userTypeName"+i).children().hasClass("end")){
				var userTypeId = $("#userTypeName"+i).children().attr("id");
			}
		}
		console.log(userTypeId);
		
		//获取费用类型ID
		var costTypeId = $btn.parents("td").prev().prev().attr("id");
		console.log(costTypeId);
		
		//获取费用类型的金额
		var salary = $btn.parents("td").prev().find("input").val();
		console.log(salary);
		
		var userTypeCostTypeSalary = {
				"userTypeId":userTypeId,
				"costTypeId":costTypeId,
				"salary":salary
		} 
		
		if(userTypeId == null){
			layer.msg("请选择职级名称");
	        return false;
		}else if(salary<=0){
			layer.msg("金额不能小于或者等于零");
	        return false;
		}else{
			$.ajax({
    	    	url:"insertDeptCostSalary.do",
    	    	type:"POST",
    	    	contentType:'application/json;charset=UTF-8',
    	    	dataType:"json",
    	        async:true,
    	        data:JSON.stringify(userTypeCostTypeSalary),
    	        success:function(data){
    	        	if(data.num == "" && data.num == null){
	            		layer.msg("金额增加失败");
	            	}else if(data.num == 1){
	            		layer.msg("金额增加成功");
	            	}
    	        },
    	    }); 
		}
	}
	
	//修改金额
	function updateSalary(btn){
        var $btn = $(btn);
		
		//获取职级名称ID
		for(var i=0;i<$(".userTypeName").length;i++){
			if($("#userTypeName"+i).children().hasClass("end")){
				var userTypeId = $("#userTypeName"+i).children().attr("id");
			}
		}
		console.log(userTypeId);
		
		//获取费用类型ID
		var costTypeId = $btn.parents("td").prev().prev().prev().attr("id");
		console.log(costTypeId);
		
		//获取费用类型的金额
		var salary = $btn.parents("td").prev().prev().find("input").val();
		console.log(salary);
		
		var userTypeCostTypeSalary = {
				"userTypeId":userTypeId,
				"costTypeId":costTypeId,
				"salary":salary
		} 
		
		if(userTypeId == null){
			layer.msg("请选择职级名称");
	        return false;
		}else if(salary<=0){
			layer.msg("金额不能小于或者等于零");
	        return false;
		}else{
			$.ajax({
    	    	url:"updateDeptCostSalary.do",
    	    	type:"POST",
    	    	contentType:'application/json;charset=UTF-8',
    	    	dataType:"json",
    	        async:true,
    	        data:JSON.stringify(userTypeCostTypeSalary),
    	        success:function(data){
    	        	if(data.num == "" && data.num == null){
	            		layer.msg("金额修改失败");
	            	}else if(data.num == 1){
	            		layer.msg("金额修改成功");
	            	}
    	        },
    	    }); 
		}
	}
</script>

</body>
</html>